<template>
  <BasicModal :show="show" title="修改应聘进度" width="30%" :widthComfirm="true" @comfirm="comfirm">
    <template #content>
      <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ style: { width: '80px', textAlign: 'right' } }">
        <a-form-item label="状态" name="status">
          <a-select show-search :filter-option="filterOption" v-model:value="form.status" placeholder="please select your zone">
            <a-select-option :value="item.value" v-for="item in statusList" :key="item.label">{{ item.label
              }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="原因" name="reason">
          <a-textarea showCount :maxlength="1000" v-model:value="form.reason" />
        </a-form-item>
      </a-form>
    </template>
  </BasicModal>
</template>

<script setup lang='ts'>
import { ref, watch } from "vue"
import type { Rule } from 'ant-design-vue/es/form';
import BasicModal from "./BasicModal.vue";
import { comStores } from '@/store/common/comStore';
import { getProcessListByCode, progressRollback } from "@/api/application-details/index.ts";
import { message } from "ant-design-vue";
const store = comStores()
const show = ref<boolean>(false);
const form = ref({
  status: "",
  reason: ""
})
const rules: Record<string, Rule[]> = {
  reason: [{ required: true, message: '请填写原因', trigger: 'change' }],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }],
};

const statusList = ref<{ value: string; label: string }[]>([])
const formRef = ref<any>(null)
watch(() => show.value, async (val) => {
  console.log(val, '===>val')
  if (val) {
    await getProcessList();
  }
})
const filterOption = (input: string, option: any) => {
  return option.key.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};

const getProcessList = async () => {
  const { resumeId } = store.currentResume;
  const data: any = await getProcessListByCode({
    resumeId,
  })
  if (data && data.code == '10000') {
    let list: { label: string; value: string }[] = [];
    const map = {
      "简历筛选": "待筛选",
      "预约面试": "待约面",
      "到面": "待面试",
      "面试": "到面",
      "预约培训": "待约",
      "发送培训邮件": "待培",
      "到培": "预约邮件已发送",
      "培训中": "培训中",
      "考核": "考核中",
      "待录取": "待录取",
      "签署应约协议": "待签应约",
      "签署三方协议": "待签三方",
      "二次面试": "二次面试",
      "入职": "待入职",
      "实习": "实习中",
      "试用": "试用期",
    }
    Array.from(new Set(data.data)).forEach((el: string) => list.push({ value: el, label: map[el] }));

    statusList.value = list
  } else {
    message.error(data.msg)
  }
}


const comfirm = async () => {
  const { resumeId } = store.currentResume;
  const { userName } = store.userInFor
  const res = await formRef.value.validate();
  if (!res) return;
  const data = await progressRollback({
    operator: userName,
    resumeId,
    process: form.value.status,
    reason: form.value.reason
  });
  console.log(data);
  if (data && data.code === '10000') {
    await store.getResumeInfo(resumeId);
    form.value.reason = ""
    form.value.status = ""
    show.value = false;
  } else {
    message.error(data.msg)
  }
  // formRef.value.resetFields();
}
defineExpose({ show })
</script>

<style lang="less" scoped>
.progress {
  display: flex;
  justify-content: end;
  margin: 24px 0;
  padding-top: 24px;
  ;
  font-weight: 400;
  font-size: 14px;
  color: #333333;

  .desc {

    font-weight: 400;
    font-size: 14px;
    color: #209EE4;

  }
}
</style>